<script lang="ts" setup>
import type { IEquipmentInfo } from "@/api/info/type";
import { useBasicInfoStore, useCharacterStore, useConfigStore } from "@/store";
import { getImage } from "@/utils";

const props = defineProps({
  eqs: {
    type: Array as PropType<IEquipmentInfo[]>,
    default: () => []
  },
  showTips: {
    type: Boolean,
    default: true
  },
  fusion: {
    type: Array as PropType<IEquipmentInfo[]>,
    default: () => []
  },
  selectMode: {
    type: Boolean,
    default: true
  }
})

const emit = defineEmits(["clickEqu"])

const eqpos = ref([
  {id:1,label:"头肩",top:10,left:47*0 , icon:getImage("ui/M5UI_SlotIcon_00.png")},
  {id:2,label:"上衣",top:10,left:47*1, icon:getImage("ui/M5UI_SlotIcon_01.png")},
  {id:3,label:"下装",top:10,left:47 * 2, icon:getImage("ui/M5UI_SlotIcon_04.png")},
  {id:4,label:"腰带",top:10,left:47 * 3, icon:getImage("ui/M5UI_SlotIcon_06.png")},
  {id:5,label:"鞋",top:10,left:47 * 4, icon:getImage("ui/M5UI_SlotIcon_08.png")},
  {id:6,label:"武器",top:10 + 47,left:47 * 0, icon:getImage("ui/M5UI_SlotIcon_03.png")},
  {id:7,label:"手镯",top:10 + 47,left:47 * 1, icon:getImage("ui/M5UI_SlotIcon_10.png")},
  {id:8,label:"项链",top:10 + 47,left:47 * 2, icon:getImage("ui/M5UI_SlotIcon_02.png")},
  {id:9,label:"戒指",top:10 + 47,left:47 * 3, icon:getImage("ui/M5UI_SlotIcon_11.png")},
  {id:10,label:"称号",top:10 + 47 *2,left:47 * 0, icon:getImage("ui/M5UI_SlotIcon_07.png")},
  {id:11,label:"公会勋章",top:10 + 47 *2,left:47 * 1, icon:getImage("ui/M5UI_SlotIcon_17.png")},
  {id:12,label:"团队模式勋章",top:10 + 47 *2,left:47 * 2, icon:getImage("ui/M5UI_SlotIcon_19.png")},
  {id:13,label:"冒险勋章",top:10 + 47 *2,left:47 * 3, icon:getImage("ui/M5UI_SlotIcon_20.png")},
  {id:14,label:"宠物",top:10 + 47 *3,left:47 * 0, icon:getImage("ui/M6UI_NPCInteraction_Icon07.png")},
  {id:15,label:"时装",top:10 + 47 *3,left:47 * 1, icon:getImage("ui/M5UI_SlotIcon_18.png")},
  {id:15,label:"圣者封印",top:10 + 47 *3,left:47 * 2, icon:getImage("ui/M6UI_CrackEquip_SimpleIcon01.png")},
])
// 直接发射到上层，调用上层的点击事件
const clickEq = (part: string) => {
  emit("clickEqu", part, true, true)
}

const infoStore = useBasicInfoStore()
const char = useCharacterStore();
const configStore = useConfigStore()

const changRole = async () => {
  configStore.save()
  await useCharacterStore().newCharacter(infoStore.currentRole, "default", "0")
}
</script>

<template>
  <view class="eq-panel-box">
    <view class="eq-panel">
      <view class="eq-panel-inner">
        <view
          v-for="(p, i) in eqpos"
          :key="i"
          class="eq-item-box"
          :style="`
          top: ${p.top}px;
          left: ${p.left}px;
          background: url(${p.icon}) no-repeat;
          background-size: 60%;
          background-position: 50% 50%;
          `"
        >
          <EqIcon
            :gray="false"
            :eq="char.equips.find(a=>a.id == configStore.equips[p.label]?.id) "
            not-use-island
            @tap="clickEq(p.label)"
          />
        </view>
        <uni-data-picker
          v-model="infoStore.currentRole"
          dark
          :clear-icon="false"
          style="position: absolute;bottom: 12px;width: 120px;right: 0px;"
          placeholder="角色"
          :localdata="infoStore.adventure"
          @change="changRole"
        />
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.eq-panel-box {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  background-color: #1c1912;
}
.eq-panel {
  height: 200px;
  width: 100%;
  // background-image: url(@/assets/images/equip/c-b-2.jpg);
  background-size: 100%;
  background-position: center;

  .eq-panel-inner {
    width: 100%;
    height: 100%;
    position: relative;
    // left: 15px;
    // top: 5px;
  }

  .eq-item-box {
    width: 38px;
    height: 38px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;

    &.fwq {
      transform: scale(0.85);
    }
  }
}
</style>
